<template>
  <!--热拼-->
    <div class="hotSpell">
      <!--返回-->
      <div class="back">
        <img src="./icons/head-back.png" alt="" @click="homePage">
      </div>
      <!--logo标志-->
      <div class="logo">
        <img src="./icons/icon.png" alt="">
      </div>
      <!--标题-->
      <div class="title">
        <h1>· 生活用纸榜 ·</h1>
        <p>本榜单以拼19.6万件</p>
      </div>
      <!--榜单-->
      <div class="SpellList_wrop">
        <div class="SpellList" v-for="(val, key) in hotSpellList" :key = key>
          <!--榜-->
          <div class="bangdan">
            {{key}}
          </div>
          <!--拼-->
          <div class="spll"></div>
          <div class="left_img">
            <img v-lazy="val.img" alt="">
          </div>
          <div class="right_text">
            <p>{{val.title}}</p>
            <div class="heat"></div>
            <p class="price">￥<span>{{val.price}}</span>&nbsp; &nbsp;<del>￥{{val.cost}}</del></p>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "hotspell",
      data(){
          return{
            hotSpellList:[]
          }
      },
      methods:{
        homePage(){
          this.$router.push({path:'/index/auth'});
        },
        getUser () {
          this.$http.get('/hotSpell')
            .then((res) => {
              this.hotSpellList = res.data.hotSpell;
              console.log(res.data.hotSpell);

            })
            .catch((err) =>{
              console.log(err);
            });
        }
      },
      created() {
          this.getUser()
      }
    }
</script>

<style scoped lang="scss">
.hotSpell{
  width: 100vw;
  background: url("./icons/pg_bg.fb68b1c.png") no-repeat 0 0 #f2f2f2;
  background-size: 100% 800px;
  box-sizing: border-box;
  padding: 5px 40px;
  .back{
    height: 120px;
    img{
      width: 120px;
      height: 120px;
    }
  }
  .logo{
    height: 200px;
    display: flex;
    /*水平轴居中*/
    justify-content: center;
    /*垂直轴居中*/
    align-items: center;
    img{
      width: 177px*2;
      height: 53px*2;
    }
  }
  .title{
    height: 290px;
    text-align: center;
    color: white;
    h1{
      font-size: 90px;
      margin: 0;
    }
    p{
      height: 65px;
      line-height: 65px;
      width: 465px;
      font-size: 38px;
      border-radius: 40px;
      margin: 45px auto;
      background: rgba(255,255,255,.2);
    }
  }
  .SpellList{
    width: 100%;
    height: 425px;
    margin-bottom: 25px;
    background: white;
    border-radius: 40px;
    padding: 40px 60px;
    display: flex;
    box-sizing: border-box;
    position: relative;
    .bangdan{
      position: absolute;
      width: 200px;
      height: 100px;
      left: 0;
      top: 0;
      background: url("./icons/bangdan.png") no-repeat   center center;
      background-size: 70px 80px;
      text-align: center;
      line-height: 100px;
      color: white;
    }

    .spll{
      position: absolute;
      right: 0;
      bottom: 50px;
      width: 140px;
      height: 85px;
      background: url("./icons/ping.png") no-repeat 0 0;
      background-size: 100% 100%;
    }
    .left_img{
      width: 400px;
      height: 100%;
      box-sizing: border-box;
      background: #abcdef;
      img{
        width: inherit;
        height: inherit;
      }
    }
    .right_text{
      flex: 1;
      margin-left: 30px;
      p{
        margin: 0;
        font-size: 45px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; //需要控制的文本行数
        overflow: hidden;
      }
      .heat{
        height: 180px;
        background: url("./icons/hot.png") no-repeat left center;
        background-size: 435px 85px;
      }
      .price{
        font-size: 35px;
        color: #eb4f3f;
        span{
          font-size: 50px;
        }
        del{
          color: #ccc;
        }
      }
    }
  }
  .SpellList:nth-child(1){
    .bangdan{
      font-size: 0;
      background: url("./icons/tuijian.png") no-repeat left bottom;
      background-size: 100% 65%;
    }
    .heat{
      visibility: hidden;
    }
  }
}

</style>
